<template>
	<view>
		<view class="tv-play">
			<u-empty v-if="list.length == 0" style="margin-top: 200rpx;" mode="data" width="200" height="200"
				icon="http://cdn.uviewui.com/uview/empty/data.png">
			</u-empty>
			<scroll-view v-else :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltolower="lower"
				@scroll="scroll">
				<view class="cartoon-warp">

					<block v-for="(item,index) in list" :key="item.id">
						<view class="item-box" @click="onDetail(item.id)">
							<!-- <u-image :src="item.cover_lateral" :lazy-load="true" mode="aspectFill" width="140" -->
							<!-- height="200" /> -->
							<image :src="item.img" class="img-item" :lazy-load="true" mode='widthFix' />
							<u--text :lines="1" :text="item.name"></u--text>
						</view>
					</block>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "my-videos",
		data() {
			return {
				scrollTop: 0,
				old: {
					scrollTop: 0
				}
			}
		},
		props: {
			list: {
				type: Array,
				default: []
			}
		},
		methods: {
			lower(e) {
				// console.log(e, '2222')
				this.$emit('lower', '数据加载中...')
			},
			scroll(e) {
				// console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
			onDetail(id) {
				this.$emit('onPage', id)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tv-play {
		.scroll-Y {
			height: 100vh;
		}

		.cartoon-warp {
			display: flex;
			flex-wrap: wrap;
			padding-left: 30rpx;
			justify-content: flex-start;

			.item-box {
				position: relative;
				margin: 0 20rpx 20rpx 0;
				width: calc(90% / 3);
				min-width: calc(90% / 3);
				max-width: calc(90% / 3);

				&:nth-child(3n) {
					margin-right: 0;

				}

				.img-item {
					width: 100%;
					border-radius: 10rpx;
				}
			}
		}
	}
</style>
